import { FormEvent, useState } from 'react'
import './style.css'
import { useAppSelector } from '../../hooks/typedHooks'
import { selectedLanguage } from '../../state/settingsSlice'
import { useDispatch } from 'react-redux'
import { addWord } from '../../state/wordSlice'
import { setFilter, setSearchTerm, setSort } from '../../state/actionSlice'

const Actions = () => {
	const [isShowingAddWordForm, setIsShowingAddWordForm] = useState(false)
	const [word, setWord] = useState('')
	const [def, setDef] = useState('')

	const language = useAppSelector(selectedLanguage)
	const searchTerm = useAppSelector(state => state.action.searchTerm)
	const sort = useAppSelector(state => state.action.sort)
	const filter = useAppSelector(state => state.action.filter)

	const dispatch = useDispatch()

	const getButtonLabel = (sort: string) => {
		if (sort === 'desc') return 'A-Z⬇'
		if (sort === 'asc') return 'A-Z⬆'
		return 'A-Z'
	}

	// React事件类型参考
	// 点击事件
	// const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {}
	// 输入变更事件
	// const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {}
	// 键盘事件
	// const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {}
	// 下拉选择事件
	// const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {}

	const handleAddWordFormSubmit = (e: FormEvent<HTMLFormElement>) => {
		e.preventDefault()
		dispatch(addWord({ language, word, def }))
		setIsShowingAddWordForm(false)
		setWord('')
		setDef('')
	}

	return (
		<div className='actions'>
			<input
				type='search'
				placeholder='请输入要搜索的单词'
				className='search'
				value={searchTerm}
				onChange={e => dispatch(setSearchTerm(e.target.value))}
			/>
			<button onClick={() => setIsShowingAddWordForm(true)}>添加单词</button>
			<button className='reverse' onClick={() => dispatch(setSort())}>
				{getButtonLabel(sort)}
			</button>
			<form>
				<select name='' id='' value={filter} onChange={e => dispatch(setFilter(e.target.value))}>
					<option value=''>全部</option>
					<option value='unremembered'>未记住</option>
					<option value='remembered'>已记住</option>
				</select>
			</form>
			{isShowingAddWordForm && (
				<form className='addNewWordForm' onSubmit={handleAddWordFormSubmit}>
					<input type='text' placeholder='单词' value={word} onChange={e => setWord(e.target.value)} />
					<input type='text' placeholder='释义' value={def} onChange={e => setDef(e.target.value)} />
					<button type='submit'>提交</button>
				</form>
			)}
		</div>
	)
}

export default Actions
